<template>
  <div id="index">
    <!-- 头部logo用户名 -->
    <div class="header">
      <span class="logoName">南京网博教育集团</span>
      <span class="userName">{{ userInfo.userName }}</span>
    </div>
    <div class="welcome">
      <span>欢迎使用网博管理系统</span>
    </div>
    <div class="pageInner">
      <el-col :span="4">
        <el-menu
          :default-openeds="openeds"
          default-active="2"
          class="el-menu-vertical-demo"
        >
          <el-submenu index="1">
            <template slot="title">
              <span class="title">人事管理</span>
            </template>
            <el-menu-item @click="gotodeptMa" index="1-1"
              >部门管理</el-menu-item
            >
            <el-menu-item @click="gotoEmp" index="1-2">员工管理</el-menu-item>
            <el-menu-item @click="gotoHoli" index="1-3">请假管理</el-menu-item>
          </el-submenu>
          <el-submenu index="2">
            <template slot="title">
              <span class="title">财务管理</span>
            </template>
            <el-menu-item @click="gotoAccount" index="2-1"
              >报销管理</el-menu-item
            >
          </el-submenu>
          <el-submenu index="3">
            <template slot="title">
              <span class="title">系统管理</span>
            </template>
            <el-menu-item @click="gotoaccMain" index="3-1"
              >账户维护</el-menu-item
            >
            <el-menu-item @click="gotoRoleMa" index="3-2"
              >角色管理</el-menu-item
            >
            <el-menu-item @click="gotoPre" index="3-3">权限管理</el-menu-item>
            <el-menu-item @click="gotoReset" index="3-4">密码重置</el-menu-item>
            <el-menu-item @click="dialogVisible = true" index="3-5"
              >系统退出</el-menu-item
            >
          </el-submenu>
        </el-menu>
      </el-col>
      <div class="right">
        <router-view />
      </div>
    </div>
    <div class="bottom">
      <div>版权归属南京网博江北总部</div>
    </div>
    <div>
      <el-dialog title="提示" :visible.sync="dialogVisible" width="30%">
        <span>确定要退出系统吗?</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="exit">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { getInfo } from "@/api/userAPI";
export default {
  name: "index",
  data() {
    return {
      userInfo: {
        userName: "张三",
      },
      openeds: ["1", "2", "3"],
      dialogVisible: false,
    };
  },
  methods: {
    // 判断是否登录
    isLogin: function () {
      if (localStorage.getItem("id") == null) {
        this.$router.push("/Login");
      }
    },
    // 请求该用户信息
    getUserInfo: function () {
      getInfo(localStorage.getItem("id")).then((res) => {
        this.userInfo = res.data;
      });
    },
    // 跳转到部门管理
    gotodeptMa: function () {
      if (window.location.pathname != "/index/deptManager") {
        this.$router.push({
          path: "/index/deptManager",
        });
      }
    },
    // 跳转到员工管理
    gotoEmp: function () {
      if (window.location.pathname != "/index/employeeManager") {
        this.$router.push({
          path: "/index/employeeManager",
        });
      }
    },
    // 跳转到请假管理
    gotoHoli: function () {
      if (window.location.pathname != "/index/holidayManager") {
        this.$router.push({
          path: "/index/holidayManager",
        });
      }
    },
    // 跳转到报销管理
    gotoAccount: function () {
      if (window.location.pathname != "/index/account") {
        this.$router.push({
          path: "/index/account",
        });
      }
    },
    // 跳转到账户维护
    gotoaccMain: function () {
      if (window.location.pathname != "/index/accountmaintain") {
        this.$router.push({
          path: "/index/accountmaintain",
        });
      }
    },
    // 跳转到角色管理
    gotoRoleMa: function () {
      if (window.location.pathname != "/index/roleManager") {
        this.$router.push({
          path: "/index/roleManager",
        });
      }
    },
    // 跳转到权限管理
    gotoPre: function () {
      if (window.location.pathname != "/index/preManager") {
        this.$router.push({
          path: "/index/preManager",
        });
      }
    },
    // 跳转到密码重置
    gotoReset: function () {
      if (window.location.pathname != "/index/resetAccount") {
        this.$router.push({
          path: "/index/resetAccount",
        });
      }
    },
    exit: function () {
      this.dialogVisible = false;
      localStorage.removeItem("id");
      this.$router.push({
        path: "/Login",
      });
    },
  },
  mounted() {
    this.isLogin();
    this.getUserInfo();
  },
};
</script>

<style lang="less" scoped>
#index {
  display: flex;
  flex-direction: column;
  .header {
    background-color: #2155bf;
    height: 50px;
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    color: white;
    line-height: 50px;
    .logoName {
      margin-left: 20px;
    }
    .userName {
      margin-right: 20px;
    }
  }
  .welcome {
    height: 40px;
    display: flex;
    justify-content: center;
    span {
      font-size: 20px;
      line-height: 40px;
    }
  }
  .pageInner {
    display: flex;
    flex-direction: row;
    .title {
      font-weight: 550;
      font-size: 16px;
      margin-left: -30px;
    }
    .right {
      width: 100%;
      height: 900px;
      overflow: hidden;
    }
  }
  .tac {
    width: 350px;
  }
}
</style>